<template>
  <div class="reading-tabs-container">
    <el-tabs v-if="showTabs" v-model="activeTab" @tab-click="onTabClick">
      <el-tab-pane label="📚 我的书架" name="bookshelf" />
      <el-tab-pane label="📖 电子书库" name="library" />
    </el-tabs>

    <!-- 子页面区域 -->
    <div class="reading-content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const activeTab = ref('bookshelf')

// ✅ 控制 tab 是否显示
const showTabs = computed(() => {
  const path = route.fullPath
  // 只在 bookshelf 或 library 页面才显示 tab
  return (
    path.includes('/reading/bookshelf') || path.includes('/reading/library')
  )
})

// ✅ 路由切换时自动更新激活的 tab
watch(
  () => route.fullPath,
  (path) => {
    if (path.includes('/reading/bookshelf')) {
      activeTab.value = 'bookshelf'
    } else if (path.includes('/reading/library')) {
      activeTab.value = 'library'
    }
    // 进入 book/1/characters 这样的页面，不动 tab
  },
  { immediate: true }
)

// ✅ Tab 点击切换
const onTabClick = (tab) => {
  const name = tab.props.name
  router.push(`/home/reading/${name}`)
}
</script>

<style scoped></style>
